<template>
	<view class="page">
		<!-- <view class="group_3"> -->
			<!-- <view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">选择课程</text>
				<view class="item">
					<input type="text" placeholder="请选择课程 " disabled v-model="userInfo.occupation_jineng"
						class="atinput" style="width: 400rpx;text-align: right;" @click="showjineng = true" />
				</view>
			</view>
			<view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">选择校区 </text>
				<view class="item">
					<input type="text" placeholder="请选择校区 " disabled v-model="userInfo.occupation_relation"
						class="atinput" style="width: 400rpx;text-align: right;" @click="showoccupation = true" />
				</view>

			</view>
			<u-picker :show="showoccupation" :columns="occupation_status" keyName="venue_name" @confirm="addoccupation"
				@cancel="showoccupation = false">
			</u-picker>

			<u-picker :show="showjineng" :columns="jineng_status" keyName="course_name" @confirm="addjineng"
				@cancel="showjineng = false">
			</u-picker>

			<text lines="1" class="text_8">运动类型</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active': listSelect.includes(item.id)}" v-for="item in list"
						:key="item.id" @click="handlist(item)">
						{{ item.class_name }}
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">运动类型</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active': jiaoSelect.includes(item.id)}" v-for="item in jiaoList"
						:key="item.id" @click="handjiao(item)">
						{{ item.classroom_name }}
					</view>
				</view>
			</view> -->


			<!-- <view class="course-item" @click="adddownup"
				style="display: flex;flex-direction: row;justify-content: space-between; padding: 10rpx 30rpx 20rpx 30rpx;">
				<view class="course-info">
					<view>早鸟剑圣班</view>
					<view>团报课程-有氧健身-东区校区-A班瑜伽</view>
				</view>
				<view class="member-count">
					<view>15人</view>
					<u-icon :name="ifup ? 'arrow-down' : 'arrow-up'" size="24rpx"></u-icon>
				</view>
			</view>

			<transition name="slide-fade" mode="out-in">
				<view v-show="!ifup" class="member-list">
					<view v-for="item in 5" :key="item" class="member-item">
						<view class="user-info">
							<image style="width: 50rpx;height: 50rpx;border-radius: 50%;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/a9/fb76483ea77de70d5d3234ca72d639.jpg?attname=%E8%A7%A3%E8%AF%B4%E5%A4%B4%E5%83%8F+%283%29.jpg"
								mode="aspectFill" />
							<view class="user-detail">
								<view>陈思远</view>
								<view>m12534561215</view>
							</view>
						</view>
						<view class="course-info">剩余15课时</view>
					</view>
				</view>
			</transition> -->
		<!-- </view> -->

		<view class="group_3">
			<view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">班级</text>
				<view class="item">
					<input type="text"  disabled v-model="classroom.class_name" class="atinput"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>
			<view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">上课教室</text>
				<view class="item">
					<input type="text"  disabled v-model="classroom_list.classroom_name" class="atinput"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>
			<!-- <view class="item">
				<input type="text" placeholder="请输入标题,最多10字" class="atinput" maxlength="10" v-model="course_name" />
			</view> -->
			<view class="" style="display: flex;flex-direction: row; justify-content: space-between">
				<text lines="1" class="text_8">选择排课日期</text>
				<text lines="1" class="text_9" style="margin-right: 40rpx;"
					v-if="datalist.length>0">已选择({{datalist.length }})天</text>
			</view>
			<view class="item">
				<input type="text" placeholder="请选择排课日期" disabled v-model="datalist" @click="show = true"
					class="atinput" />
			</view>
			<u-calendar :show="show" :mode="mode" @confirm="confirm" @close="show = false"></u-calendar>

			<text lines="1" class="text_8">选择排课时段</text>
			<view class="item" style="display: flex;flex-direction: row; ">
				<input type="text" placeholder="请选择开始排课时段" disabled v-model="timelist" @click="timeshow = true"
					class="atinput" />
				<input type="text" placeholder="请选择结束排课时段" disabled v-model="timelist2" @click="timeshow2= true"
					class="atinput" />
			</view>
			<u-datetime-picker :show="timeshow" v-model="value1" mode="time" :minute-step="1" @confirm="handleConfirm"
				@cancel="timeshow = false"></u-datetime-picker>
			<u-datetime-picker :show="timeshow2" v-model="value2" mode="time" :minute-step="1" @confirm="handleConfirm2"
				@cancel="timeshow2 = false"></u-datetime-picker>

			<view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">课节扣除</text>
				<view class="item">
					<input type="text" placeholder="请输入课节扣除 " v-model="deduct_num" class="atinput"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>
			<view class="d-flex flex-row justify-space-between">
				<text lines="1" class="text_8">提交占场通知</text>
				<view class="item">
					<u-checkbox shape='circle' :checked="reg_face" @change='checkboxChange'>选中</u-checkbox>
				</view>
			</view>
		</view>

		<view class="" style="width: 100%;height: 10vh;"></view>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ff4040 1rpx solid">
				取消
			</view>
			<view class="" @click="button_3"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				showjineng: false,
				occupation_jineng: '',
				occupation_jineng_id: '',
				jineng_status: [],
				venue_id: '',
				ifup: true,
				show: false,
				mode: 'multiple',
				datalist: [],
				value1: null, // 选中的时间戳（时分）
				timeshow: false,
				timelist: '', // 显示的时分字符串
				datalist2: [],
				value2: null, // 选中的时间戳（时分）
				timeshow2: false,
				timelist2: '', // 显示的时分字符串
				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
					occupation_jineng: '',
					occupation_jineng_id: '',
				},
				occupation_status: [],
				jineng_status: [],
				occupation_list: [],
				jineng_list: [],
				showoccupation: false,
				showbanji: false,
				occupation_banji: '',
				occupation_banji_id: '',
				banji_status: [],
				jiaoList: [],
				jiaoSelect: [], //选中的
				list: [],
				jiaoList: [],
				listSelect: [], //选中的
				deduct_num: '1',
				reg_face: true,
				regface: '',
				checked: true,
				classroom:{},
				classroom_list:{}
			}
		},
		onLoad(options) {
			console.log(options,options)
			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			this.classroom = selectionArrs
			console.log(this.classroom)
			this.venue_id = options.venue_id
			this.confroom()
		},
		methods: {
			checkboxChange(event) {
				console.log('复选框的值发生变化：', event);
				this.reg_face = event;
			},
			handlist(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.listSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.listSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.listSelect.push(data);
				}
			},
			handjiao(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.jiaoSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.jiaoSelect.push(data);
				}
			},
			
			async confroom() {
				let params = {
					area_id: this.classroom.area_id,
				};
				let res = await train.confroom(params);
				if (res.code == 1) {
					const classrooms = res.data
					const targetId = this.classroom.classroom_id
					const targetClassroom = classrooms.find(item => item.id === targetId);
					this.classroom_list = targetClassroom
				}
			},
			async cls_list() {
				let params = {
					area_id: this.userInfo.occupation_relation_id,
					course_id: this.userInfo.occupation_jineng_id,

				};
				let res = await train.cls_list(params);
				if (res.code == 1) {
					this.jiaoList = res.data.classroomList
					this.list = res.data.list
				}
			},
			async button_3() {
				let params = {
					class_id: this.classroom.id,
					class_name:this.classroom.class_name,
					classroom_id: this.classroom.classroom_id,
					course_id:this.classroom.course_id,
					dates: this.datalist,
					deduct_num: this.deduct_num,
					notify: this.reg_face ? 1 : 0,
					time_period: [this.timelist, this.timelist2]

				};
				console.log(params, 'params')
				let res = await train.cls_curriculum(params);
				if (res.code == 1) {
					uni.$u.toast(res.info);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
						});
					}, 1000)
				}
			},
			handleConfirm(e) {
				console.log(e, 'e')
				this.timelist = e.value
				this.timeshow = false;
			},
			confirm(e) {
				this.datalist = e
				this.show = false
				console.log(e.length);
			},
			handleConfirm2(e) {
				console.log(e, 'e')
				this.timelist2 = e.value
				this.timeshow2 = false;
			},
			confirm2(e) {
				this.datalist2 = e
				this.show2 = false
				console.log(e.length);
			},
			adddownup() {
				this.ifup = !this.ifup
			},
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.occupation_list = res.data.areaList
					this.occupation_status.push(
						this.occupation_list
					)
					this.jineng_list = res.data.courseList
					this.jineng_status.push(
						this.jineng_list
					)
				}
			},

			addjineng(e) {
				this.userInfo.occupation_jineng = e.value[0].course_name
				this.userInfo.occupation_jineng_id = e.value[0].id
				this.userInfo.course_mode_type = e.value[0].course_mode_type
				this.showjineng = false
				this.cls_list()
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].venue_name
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
				this.cls_list()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #EDF5F5;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.0);
			width: 710rpx;
			// height: 100%;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			/* 动画样式 */
			.slide-fade-enter-active,
			.slide-fade-leave-active {
				transition: all 0.3s ease;
			}

			.slide-fade-enter,
			.slide-fade-leave-to {
				opacity: 0;
				transform: translateY(-20rpx);
			}

			.course-item {
				font-size: 24rpx;
				padding: 10rpx 30rpx;
			}

			.course-info view {
				line-height: 36rpx;
				color: #333;
				font-size: 24rpx;
			}

			.member-count {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.member-list {
				padding: 0 30rpx 20rpx 30rpx;
			}

			.member-item {
				background-color: #eeeeee;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.user-info {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.user-detail view {
				line-height: 30rpx;
				font-size: 24rpx;
				color: #666;
			}

			.course-info {
				color: #999;
			}

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 660rpx;
					padding-left: 20rpx;
					color: #000000;
				}

				.item-title {
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					// display: grid;
					// grid-template-columns: repeat(5, 1fr);
					// grid-gap: 20rpx;
					// position: relative;
					flex-direction: row;
					width: 650rpx;
					font-size: 24rpx;
					flex-wrap: wrap;
					display: flex;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
						padding: 6rpx 12rpx;
						margin-top: 20rpx;
						margin-right: 20rpx;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgb(51, 51, 51);
						background-color: rgb(243, 243, 243);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: #000;
			font-size: 24rpx;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.text_9 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: #000;
			font-size: 24rpx;
			font-weight: 500;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 20rpx 0 0;
			text-align: right;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}
	}
</style>